$backtop-prefix-cls-top: "#{$css-prefix}back-top";
$backtop-prefix-cls-bottom: "#{$css-prefix}back-bottom";

@mixin inner(){
    background-color: $backtop-inner-background-color;
    border-radius: $backtop-inner-border-radius;
    box-shadow: $backtop-inner-box-shadow;
    transition: all $transition-time $ease-in-out;
    padding: $backtop-inner-padding;
    font-size: $backtop-inner-font-size;
    color: $backtop-inner-color;
    &:hover {
        background-color: $backtop-inner-hover-background-color;
    }
}

.#{$backtop-prefix-cls-top},
.#{$backtop-prefix-cls-bottom} {
    z-index: $zindex-back-top;
    position: fixed;
    cursor: pointer;
    display: none;
}

.#{$backtop-prefix-cls-top} {
    &.#{$backtop-prefix-cls-top}-show {
        display: block;
    }
    &-inner {
        @include inner();
        i{
            color: $backtop-top-inner-i-color;
            font-size: $backtop-top-inner-i-font-size;
            padding: $backtop-top-inner-i-padding;
        }
    }
    
}
.#{$backtop-prefix-cls-bottom} {
    display:block;
    &.#{$backtop-prefix-cls-bottom}-hidden {
        display: none;
    }
    &-inner {
        @include inner();
        i{
            color: $backtop-bottom-inner-i-color;
            font-size: $backtop-bottom-inner-i-font-size;
            padding: $backtop-bottom-inner-i-padding;
        }
    }
    
}
